<template>
  <div class="parent">
    <p class="namep" @click="goSpc(chartsList)">
      {{ chartsList.title != null ? chartsList.title : "空" }}
    </p>
    <p class="neikongp">{{ chartsList.requirements }}</p>
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, nextTick } from "vue";
import echartsDom from "./echartsDom.vue";
import { symbol } from "vue-types";
import { useRouter } from "vue-router";
import { PxMessage, PxMessageBox } from "px-ui";

const router = useRouter();
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  chartsList: {
    type: Array,
    default: () => {}
  },
  xaxis: {
    type: Array,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);

console.log(props.chartsList);
option.value = {};
const isOnTheHour = timeStr => {
  console.log(timeStr);
  const regex = /^(?:[01]\d|2[0-3])(?::[0-5]\d){2}$/;
  if (!regex.test(timeStr)) {
    return false;
  }
  const [hours, minutes] = timeStr.split(":");
  return minutes === "00";
};
const fillNullsWithPrevious = data => {
  let previousNonNull = null;
  return data.map(item => {
    if (item == null) {
      return previousNonNull;
    } else {
      previousNonNull = item;
      return item;
    }
  });
};
const goSpc = val => {
  if (val.pointPosition) {
    router.push(`/water/spc/spcsarch?pointPosition=${val.pointPosition}`);
  } else {
    PxMessage({
      message: "暂无SPC指标",
      type: "error"
    });
  }
  console.log(val.pointPosition);
};
setTimeout(() => {
  isShowEcharts.value = true;
  option.value = {
    color: [props.color],
    backgroundColor: props.type == "dark" ? "" : "",
    grid: {
      left: "20px",
      top: "40px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    legend: {},

    tooltip: {
      trigger: "axis",
      axisPointer: {
        link: [
          {
            xAxisIndex: [0]
          }
        ]
      },
      formatter: function (parmas) {
        var color = parmas[0].color;
        var seriesData = parmas[0];
        var name = seriesData.name;
        var value = seriesData.value;
        return (
          `<span style="font-size:13px">${name.split(" ")[0]}</span>` +
          "<br/>" +
          `<span style="font-size:13px">${name.split(" ")[1]}</span>` +
          "<br/>" +
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
          color +
          '"></span>' +
          `<span style="font-weight: 600">${value}</span>` +
          "<br/>"
        );
      }
    },
    xAxis: [
      {
        show: false,
        type: "category",
        boundarGap: false,
        data: props.xaxis,
        interval: 3600 * 1000,
        axisPointer: {
          show: true
        }
        // axisLabel: {
        //   formatter: function (value) {
        //     if (isOnTheHour(value)) {
        //       return value;
        //     }
        //     return "";
        //   }
        // }
      },
      {
        type: "category",
        position: "bottom",
        boundarGap: false,
        data: props.xaxis.filter(item => item.split(":")[1] === "00").map(item => item.split(" ")[1]),
        axisPointer: {
          show: false
        }
        // axisLabel: {
        //   formatter: function (value) {
        //     return value.slice(0, 10) + "\n" + value.slice(11, 16);
        //   }
        // }
      }
    ],
    // yAxis: {
    //   name:
    //     props.chartsList.title != null
    //       ? props.chartsList.unit != null
    //         ? `${props.chartsList.title}(${props.chartsList.unit})`
    //         : props.chartsList.title
    //       : "空",
    //   type: "value",
    //   axisLabel: {
    //     formatter: function (value) {
    //       return value;
    //     }
    //   }
    // },
    yAxis: {
      name: props.chartsList.unit != null ? props.chartsList.unit : "空",
      type: "value",
      nameLocation: "end",
      nameTextStyle: {
        align: "left"
      },
      max:
        props.chartsList?.title == "PH"
          ? 10
          : Number(props.chartsList?.maxValue) > Number(props.chartsList?.max)
            ? Number(props.chartsList?.maxValue)
            : Number(props.chartsList?.max),
      min: props.chartsList?.title == "PH" ? 5 : Number(props.chartsList?.minValue) > 0 ? Number(props.chartsList?.minValue) : 0
    },
    series: [
      {
        data: fillNullsWithPrevious(props.chartsList?.details.map(item => item.value)),
        type: "line",
        areaStyle: {
          opacity: 0.15
        },
        symbol: "circle",
        symbolSize: 8,
        showSymbol: false,
        markLine: {
          symbol: "none",
          silent: true,
          data: [
            {
              name: "最大值",
              yAxis: Number(props.chartsList.max),
              lineStyle: {
                color: "#FF0844",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: ``,
                color: "#FF9900"
              }
            },
            {
              name: "最小值",
              yAxis: Number(props.chartsList.min),
              lineStyle: {
                color: "#FF0844",
                wideh: "1",
                type: "dashed",
                opacity: props.chartsList.min != "" ? 1 : 0
              },
              label: {
                position: "end",
                formatter: ``,
                color: "#FF9900"
              }
            }
          ]
        }
      }
    ]
  };
}, 200);
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.neikongp {
  position: absolute;
  top: 35px;
  right: 13px;
  font-size: 12px;
  font-weight: 600;
  color: #ff0844;
}

.namep {
  width: 100%;
  font-size: 13px;
  font-weight: bold;
  color: #484646;
  text-align: center;
  cursor: pointer;
}
</style>
